﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="margin-top:40px">
       
            <div id="leftSideBar" style="min-width: 500px; max-width: 500px; float: left ">
                <div style="min-height:40px;float:left;width:100%;margin-bottom:40px">
                    <span class="font-size-30">{{$$$res("capModule","PHÂN HỆ","ModuleName","hubpage/hubpage.html")}}</span>
                </div>
                <div style="float: left; width: 100%;overflow-y:scroll" id="leftSideBar-body">
                    <div ng-repeat="p in menu" ng-click="showDetail(p);" style="float:left;
                                                                                    clear:both;
                                                                                    height:80px;
                                                                                    max-height:80px;
                                                                                    width:100%;
                                                                                    margin-bottom:40px;
                                                                                    cursor:pointer;
                                                                                 " class="hubpage-item">
                        <table style="margin-bottom: 20px; float: left; clear: both; width: 100%;" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top" style="width:80px;margin:0px;padding:0px">
                                    <img ng-src="/Assets/Icons/{{p.Icon}}" class="block-size-80" style="float:left" />
                                </td>
                                <td valign="top" style=" margin: 0px; padding: 0px;padding-left:10px;padding-right:20px;">
                                    <span class="font-size-20" style="float:left;clear:right; margin-bottom:4px;padding-left:4px;padding-right:4px">{{$$$res("AppMenu."+p.Caption,p.Caption,"ModuleName","hubpage/hubpage.html")}}</span>
                                    <span class="font-size-level-3" style="float: left; clear: left; padding-left: 4px; padding-right: 4px;color:#000">{{$$$res("AppMenu."+p.Description,p.Description,"Module_Description","hubpage/hubpage.html")}}</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>


            </div>
            <div id="rightSideBar" style="overflow-x:scroll;overflow-y:hidden; float: right;padding-left:10px">

                <table style="margin:0px;padding:0px" cellpadding="0" cellspacing="0">

                    <tr>
                        <td ng-repeat="p in menu" style="margin: 0px; padding: 0px" valign="top">
                            <table style="width:560px;min-width:560px;float:left;margin:0px;padding:0px" cellpadding="0" cellspacing="0">

                                <tr>
                                    <td>
                                        <span class="font-size-30" style="text-transform:uppercase" ng-click="showDetail(p);">
                                            {{$$$res("AppMenu."+p.Caption,p.Caption,"ModuleName","hubpage/hubpage.html")}}

                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 40px; min-height: 40px; color: #000">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td>

                                        <div ng-repeat="x in p.children.item" ng-if="p.children.item.indexOf(x)<9" style="margin-right:20px;margin-bottom:20px;color:#000" class="block-size-150 hugpage-block-item" ng-class="[p.BlockClass]">

                                            <table style="float:left;width:100%;cursor:pointer" cellpadding="0" cellspacing="0" ng-click="loadPage(p,x)">
                                                <tr>
                                                    <td style="min-height:100px">&nbsp;</td>
                                                </tr>

                                                <tr>

                                                    <td style="padding:4px" ng-class="[p.caption_class]">

                                                        {{$$$res("AppMenu.Item."+menu.indexOf(p)+"."+p.children.item.indexOf(x)+"."+x.caption,x.caption,"FormName","hubpage/hubpage.html")}}


                                                    </td>
                                                </tr>
                                            </table>

                                        </div>

                                    </td>

                                </tr>
                                <tr>
                                    <td style="color:#000">
                                        <span class="font-size-40" ng-click="ShowMore(p);" ng-if="p.children.item.length>9">...</span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
      
    </div>
    <script>
        var scope = this;
        scope.$$$ready(function () {
            scope.$find("#leftSideBar").css("max-height", $(window).height() - 160);
            scope.$find("#leftSideBar").css("min-height", $(window).height() - 160);
            scope.$find("#rightSideBar").css("max-height", $(window).height() - 160);
            scope.$find("#rightSideBar").css("min-height", $(window).height() - 160);
            scope.$find("#leftSideBar-body").css("min-height", $(window).height() - 320);
            scope.$find("#leftSideBar-body").css("max-height", $(window).height() - 320);
            scope.$find("#rightSideBar").css("max-width", $(window).width() - 160 - 500 - 40);
            scope.$find("#rightSideBar").css("min-width", $(window).width() - 160 - 500 - 40);
            scope.loadMenu();
          

        });
        scope.loadMenu = function () {
            ngW8.$("$http").get("ms-appx:////pages/hubpage/menu.xml?" + (new Date().getMilliseconds()))
            .success(function (res) {
                var x2js = new X2JS();
                var ret = x2js.xml_str2json(res);
                scope.$root.$application_menu = ret.root.item;
                window.top.$navigator.menu = ret.root.item;
                scope.menu = ret.root.item;
               
                scope.$root.$apply();
                $("img.block-size-80").each(function (index, ele) {
                    $(ele).attr("src", $(ele).attr("src").replace("unsafe:", ""));
                });
                $("img.block-size-80").each(function (index, ele) {
                    $(ele).attr("src", $(ele).attr("src").replace("unsafe:", ""));
                });
            });
        };
        scope.getInfo = function () {
            return ngW8.$("$store").$get("UserInfo");
        }
        scope.loadPage = function (p, x, nonHistory) {
            scope.$root.$appView.loadView(x.page, function (subScope) {
                if (!subScope.$$$caption) {
                    var menu = window.$navigator.menu;
                    window.$navigator.module = p;
                    subScope.$$$caption = subScope.$$$res("AppMenu.Item." + menu.indexOf(p) + "." + p.children.item.indexOf(x) + "." + x.caption, x.caption, "FormName", "hubpage/hubpage.html")
                   
                }
                subScope.$root.$session_header.$setCaption(subScope.$$$caption);
                scope.$root.$header.$hide();
                scope.$root.$session_header.$show();
            });
            
           
        }
       
       
        scope.showDetail = function (item) {
            window.top.$navigator.module = item;
            window.top.$navigator.form = undefined;
            
            var caption = scope.$$$res("AppMenu." + item.Caption, item.Caption, "ModuleName", "hubpage/hubpage.html");
           
            scope.$root.$appView.loadView("hubPageDetail.html", function (subScope) {
                if (!subScope.$$$caption) {
                    subScope.$$$caption = subScope.$$$res("AppMenu." + item.Caption, item.Caption, "ModuleName", "hubpage/hubpage.html");
                    
                }
                subScope.$root.$header.$hide();
                subScope.$root.$session_header.$show();
                subScope.$root.$session_header.$setCaption(subScope.$$$caption);
            });
        }
        scope.ShowMore = function (item) {

            ngW8.$("$loader").$load(scope, "/hubpage/hubpage_more.html", function (subScope, ele) {
                window.top.$navigator.module = item;
                window.top.$navigator.form = undefined;
                $("body").html("");
                ele.appendTo($("body")[0]);
            }, true);
        }
    </script>
</body>
</html>